import React, { PureComponent } from "react";
import {connect} from "react-redux";
import { ADDCOUNT,ADDCOUNTASYNC, MiNUSCOUNT } from "./store/actions";

class ReduxBaseDemo extends PureComponent {

    constructor(props){
        super(props);
        console.log("props",props);
    }

  render() {
    console.log("render");
    return (
      <div>
        <h1>react-redux的使用</h1>
        <p>基本类型的数据：</p>
        <p>count:{this.props.count}</p>
        <input type="button" value="加法" onClick={()=>this.props.addCount(2)} />
        <input type="button" value="加法(带异步)" onClick={this.props.addCountAsync} />
        <input type="button" value="减法" onClick={this.props.minusCount} />
      </div>
    );
  }
}

// 把state映射到本组件的属性上。
function mapStateToProps(state){
    //这个返回值会合并到本组件的属性上。
    return {
        count:state.count
    }
}

// 把派发action的函数映射到本组件的属性。
function mapDispatchToProps(dispatch){
    // 这个返回值会合并到本组的属性上
    return {
        addCount:(payload)=>dispatch(ADDCOUNT(payload)),
        addCountAsync:()=>dispatch(ADDCOUNTASYNC()),
        minusCount:()=>dispatch(MiNUSCOUNT(1))
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(ReduxBaseDemo);